<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../../js/plugins/element-ui/element-ui.css">
		<!--fontAwesome-->
		<link rel="stylesheet" href="../../css/front/font-awesome.min.css">
		<title>最新活动列表</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
			}
			
			footer {
				color: #FFFFFF;
				height: 150px;
				line-height: 150px;
				text-align: center;
				background: #373D41;
				width: 100%;
			}
			ul{ margin:0;padding:0;}
			
			ul li {
				list-style: none;
			}
			.header{
				width: 100%;
				height: 420px;
				background: #262626 url(https://img.alicdn.com/tfs/TB1D0dyRpXXXXcwXVXXXXXXXXXX-3200-840.jpg) no-repeat center top; background-size: 1600px 420px;
			}
			.header-content{
				padding: 0 10%;
				 /* Required for IE 5, 6, 7 */  
				    /* ...or something to trigger hasLayout, like zoom: 1; */  
				    /*width:300px;  
				    height:300px;  
				    line-height:300px;  */
				    text-align:center; 
				    background: none; 
				    /* older safari/Chrome browsers */  
				    -webkit-opacity: 1;  
				    /* Netscape and Older than Firefox 0.9 */  
				    -moz-opacity: 1;  
				    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
				    -khtml-opacity: 1;  
				    /* IE9 + etc...modern browsers */  
				    opacity: .9;  
				    /* IE 4-9 */  
				    filter:alpha(opacity=100);  
				    /*This works in IE 8 & 9 too*/  
				    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  
				    /*IE4-IE9*/  
				    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);  
				}
			.header-right{float: right;line-height: 56px;}
			.header-right a{color: #FFFFFF;text-decoration:none; }
			.header-right a:hover{color: #007AFF;}
			.sub-header {
				width: 70%;
				float: left;
				height: 63px;
				line-height: 63px;
				color: #FFFFFF;
			}
			
			.sub-header ul {
				width: 100%;
			}
			
			.sub-header ul li {
				float: left;
				margin: 0 20px;
				font-size: 14px;
				font-size: 16px;
			}
			
			.sub-header a {
				cursor: pointer;
			}
			.logo {
				width: 200px;
				height: 63px;
				line-height: 80px;
				float: left;
			}
			.el-breadcrumb {
				line-height: 4;
				}
			.el-menu--dark {
				  background-color: #FFFFFF;
				  min-height: 500px;
				}	
				
			.el-menu-item, .el-submenu__title {
					height: 30px;
					line-height: 30px;
				}
			.el-menu li.el-menu-item {
				 background-color: #cecece;
				 color: #000000;
				 margin: 30px 10px;
				 text-align: center;
				}
			/*.el-menu--horizontal .el-menu-item {
				float: right;
			}*/
			
		</style>
	</head>
	<body>
		<div id="active-list">
			<!--header-->
			<header class="header">
				<div class="header-content">
					<el-row :gutter="24">
					<el-col :span="4">
						<div class="logo">
							<img src="../../img/header_logoaa.gif" width="100%" />
						</div>
					</el-col>
					<el-col :span="12">
						<div class="sub-header">
							<ul>
								<li v-for="nav in navs">
									<a :href="nav.clik">{{nav.name}}</a>
								</li>
							</ul>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="sub-header" style="float: right;">
							<ul>
								<li>
									<a>登录</a>
								</li>
								<li>
									<a>注册</a>
								</li>
							</ul>
						</div>
					</el-col>
				</el-row>
				</div>
			</header>
			<div style="background: #EAEDF1;">
				<div class="sub-nav" style="height: 50px;line-height: 50px;margin-left: 10px;">
					<el-breadcrumb separator=">">
					  <el-breadcrumb-item :to="{ path: '>' }">首页</el-breadcrumb-item>
					  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
					  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="content" style="width: 80%;margin: 0 10%;">
					<el-row :gutter="24">
						<el-col :span="4">
							<div style="color:#FFFFFF;height: 56px;line-height: 56px;text-align: center;background: #48576a;">导航栏</div>
							<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
								<el-menu-item index="1">通知公告</el-menu-item>
								<el-menu-item index="2">活动信息</el-menu-item>
								<el-menu-item index="3">平台资讯</el-menu-item>
							</el-menu>
						</el-col>
						<el-col :span="15" >
							<el-table :data="tableData" style="width: 100%">
						      <el-table-column prop="date" label="日期" width="180">
						      </el-table-column>
						      <el-table-column prop="name" label="姓名" width="180">
						      </el-table-column>
						      <el-table-column prop="address" label="地址">
						      </el-table-column>
						    </el-table>
						</el-col>
						
						<el-col :span="4">
							<div style="background: #FFFFFF;height: 350px;border: 1px solid #CECECE;padding: 5px;">
								会员产品广告图片
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
			<footer>
				<p>版权所有：贵州绿建云&nbsp;&nbsp;&nbsp;&nbsp;Copyright©2017 All rights reserved</p>
			</footer>
		</div>
		<script type="text/javascript" src="../../js/plugins/vue/vue.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/element-ui/element-ui.js"></script>
		<script type="text/javascript" src="../../js/plugins/jQuery/jquery-3.1.1.min.js"></script>
	</body>
	<script>
		var Main = new Vue({
			el:'#active-list',
			data:{
					//导航
					navs: [{
							name: '工程信息'
						},
						{
							name: '招投标信息'
						},
						{
							name: '会员服务'
						}

					],
					tableData: [{
			            date: '2016-05-02',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1518 弄'
			          },{
			            date: '2016-05-02',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1518 弄'
			          }, {
			            date: '2016-05-04',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1517 弄'
			          }, {
			            date: '2016-05-01',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1519 弄'
			          },{
			            date: '2016-05-02',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1518 弄'
			          },{
			            date: '2016-05-01',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1519 弄'
			          },{
			            date: '2016-05-03',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1516 弄'
			          }],
			          activeName:"first",
			          currentPage4: 4
			},
			methods: {
				handleOpen:function(key, keyPath) {
			        console.log(key, keyPath);
			    },
			    handleClose:function(key, keyPath) {
			        console.log(key, keyPath);
			    },
			    handleSizeChange:function(val) {
			        console.log(`每页 ${val} 条`);
		        },
		        handleCurrentChange:function(val) {
		            console.log(`当前页: ${val}`);
		        }
			},
		})
	</script>
</html>
